<template>
  <div id="container">
    <div id="userInfo">
      <h1>用户信息</h1>
      <div id="image_container" >
        <img src="../assets/1.png"/>
      </div>
      <div style="font-size: 32px;padding-top: 10px">{{ currentUser.name }}</div>
      <div id="function"  >
        <el-button @click="$router.push('/personCenter/order_out')">我的订单</el-button>
        <el-button @click="$router.push('/personCenter/edit')">我的信息</el-button>
      </div>
    </div>
    <div id="content">
      <router-view/>
    </div>
  </div>

</template>

<script setup>
import {reactive} from "vue";
let currentUser = reactive({
    name:''
})

currentUser.name = JSON.parse(localStorage.getItem('name'))

</script>

<style scoped>

#container {
  text-align: center;
  display: flex;
  /*width: 80%;*/
}
#userInfo {
  width: 25vw;
  height: 100vh;
  background: #C3F1EB;
  align-items: center;
  display: flex;
  flex-direction: column;
}

#userInfo > h1 {
  font-size: 24px;
}

#image_container {
  width: 80px;
  height: 80px;
  overflow: hidden;
  margin-top: 100px;
  background-color: #D8E0EA;
  border-radius: 100px;
  border: 1px lightgray solid;
}

#image_container > img {
  width: 80px;
  height: 80px;
}

#function{
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  overflow: auto;
}
#function > button {
  background-color: #3A9A75;
  color: white;
  padding: 8px 100px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;

    margin: 50px 0 0;
}
#content{
  flex: 1;
}
#function > button:hover{
  background: #1D815B;
  color: white;
}
</style>